<template>
	<div ref="mgrDialog" class="dialog-wrap">
		
		<el-dialog 
			:title="headerTitle" 
			width="70%" 
			:visible.sync="dialogVisible"
			@close="dialogClose"
		>
			
			<el-row :gutter="20">
				<el-form 
					v-if = "editForm != null"
					size="mini"
					ref="dialogForm"
					:rules="rules"
					:label-width="formLabelWidth"
					:model.sync="editForm">
					
					<el-col :span="12">
						<el-form-item label="部门简称" prop="simpleName">
		      				<el-input v-model="editForm.simpleName" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="部门全称" prop="fullName">
		      				<el-input v-model="editForm.fullName" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="上级部门" prop="pid">
		      				
		    				<input-tree
		    					class="with-full"
		    					v-model="editForm.pid"
		    					:data.sync="deptTreeData"
		    					:name="editForm.pName"
		    					:props="treeProps"
		    					node-key="id"
		    					node-name="name"
		    					@selected="pidSelect"
		    				></input-tree>

		    			</el-form-item>
		    		</el-col>

		    		
		    		
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="排序" prop="sort">
		      				<el-input type="number" v-model="editForm.sort" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="24">	
		    			<el-form-item label="备注" prop="description">
		      				<el-input style="width:100%;" type="textarea" v-model="editForm.description" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    				
				</el-form>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">确定</el-button>
			    <el-button size="mini" type="danger" @click="cancel">取消</el-button>
			</div>	
		</el-dialog>

	</div>
</template>


<script>
import { getList, getDeptTree } from "@/api/admin/dept";
import InputTree from "@/components/InputTree"
export default{
	components:{
		InputTree
	},
	props:{
		//新增还是编辑
	    type:{
	      type:[Number,String],
	      defalut:0
	    },
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:null
		}
	},
	computed:{
	
	},
	watch:{
		form(newVal,oldVal){
			
			if(newVal != null){
				this.editForm = newVal;
			}else{
				this.editForm = this.defaultForm;
			}	
		},
		type(newVal,oldVal){
	      	if(newVal == 1){
	        	this.headerTitle = "添加部门";
	        	this.editForm = this.defaultForm;
	      	}else if(newVal == 2){
	        	this.headerTitle = "修改部门";
	        	this.editForm = this.form;
	      	}
	    },
	    visible(val){
	    	this.dialogVisible = val;
	    }
	},
	data(){
		return{
			headerTitle:"添加部门",
			dialogVisible:false,
			defaultForm:{
				simpleName:'',
				fullName:'',
				pid:'0',
				pName:'顶级',
				description:'',
				sort:'',
			},
			editForm:null,
			//验证规则
		    rules:{
		        simpleName:[{required:true,message:"部门简称",trigger:"blur"}],
		        fullName:[{required:true,message:"请输入部门全称",trigger:"blur"}],
		        pid:[{required:true,message:"请输入父级编号",trigger:"blur"}],
		        description:[{required:true,message:"请输入部门备注",trigger:"blur"}],
		        sort:[{required:true,message:"请输入排序",trigger:"blur"}],
		    },
			formLabelWidth:'100px',
			deptTreeData:[],
			treeProps:{
	          	children: 'childrenNodes',
	          	label: 'name',
	          	value: 'id'
	        }
		}
	},
	created(){
    	this.getDeptTree()
  	},
	mounted(){

	},
	methods:{
		//获取部门树，作为添加和修改的选项
    	getDeptTree(){
      		getDeptTree().then((res) => {
        		console.log("-------获取部门树-------")
        		console.log(res.data)
        		this.deptTreeData = this.convertTree(res.data);

      		})
    	},
    	convertTree(data){
    		//没有父节点的数据
    		let parents = data.filter(value => {
    			console.log(value.pId == value.id)
    			return value.pId == 'undefined' || value.pId == null || value.pId == value.id;
    		})
    		//有父节点的数据
    		let children = data.filter(value => {
    			return value.pId !== 'undefined' && value.pId !== null && value.pId !== value.id;
    		})


    		//定义转换方法
    		let translator = (parents, children) => {
    			//遍历父节点数据
    			parents.forEach((parent)=>{
    				//遍历子节点
    				children.forEach((current,index)=>{
    					//此时找到父节点对应的一个子节点
    					if(current.pId === parent.id){
    						//对子节点数据进行深复制
    						let temp = JSON.parse(JSON.stringify(children))
    						//让当前子节点从temp中移除，temp作为新的子节点数据，这里为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
    						temp.splice(index,1);
    						//让当前子节点作为唯一的父节点，去递归查找其对应的子节点
    						translator([current],temp);
    						//把找到的子节点放入父节点的children属性中
    						typeof parent.childrenNodes !== 'undefined' ? parent.childrenNodes.push(current) : parent.childrenNodes = [current]
    					}
    				})
    			})
    		} 

    		translator(parents,children);

    		return parents;
    	},
		dialogClose(){
			this.cancel();
		},
		//取消按钮
		cancel(){
			this.editForm = null;
			this.dialogVisible = false;
			this.$emit('cancel')
		},
		confirm(){
			this.$refs.dialogForm.validate((valid)=>{
		        if (valid) {
		          
		          this.$emit('confirm',{type:this.type,data:this.editForm});
		          this.dialogVisible = false;

		        } else {
		           
		            return false;
		        }

      		})
		},
		pidSelect(obj){
			this.editForm.pid = obj.id;
			this.editForm.pName = obj.name;
		}

	}
}


</script>

<style scoped>
.with-full{
  position:relative!important;
  width:100%!important;
}	
</style>